<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Tag Selector for jQuery</title>
	<meta name="description" content="Allows selecting multiple &quot;Tags&quot; by using jQuery UI's Autocomplete plugin with an interface similar to the one used by Facebook for sending a message to friends.">
	<meta name="author" content="Julio César Carrascal Urquijo &lt;jcarrascal@gmail.com&gt;">
	<link rel=stylesheet href="styles.css">
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel=stylesheet type="text/css">
	<link href="jquery-tagselector.css" rel=stylesheet>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
	<script src="jquery-tagselector.js"></script>
</head>
<body>
	<h1>Tag Selector for jQuery</h1>
	<p class=summary>
		Allows selecting multiple &quot;Tags&quot; by using <a href="http://jqueryui.com/demos/autocomplete/">jQuery
		UI's Autocomplete</a> plugin with an interface similar to the one used by Facebook for sending a message to
		friends.
	</p>
	<p>And this is how it looks like:</p>
	<p>
		<div id=tags class=tagSelector style="width:300px">
			<span class=tag>
				jQuery <a>×</a>
				<input name=tags type=hidden value=42>
			</span>
			<input type=text>
		</div>
	</p>
	<h2>Usage:</h2>
	<p>
		In your page you need to include jQuery, jQuery UI CSS file, jQuery UI JavaScript file, the Tag Selector CSS 
		file and the Tag Selector JavaScript file. In the following sample you can see how it looks:
	</p>
	<pre>
&lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css"
	rel=stylesheet type="text/css"&gt;
&lt;link href="jquery-tagselector.css" rel=stylesheet&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery-tagselector.js"&gt;&lt;/script&gt;
&lt;div id=tags class=tagSelector style="width:300px"&gt;
	&lt;span class=tag&gt;
		jQuery &lt;a&gt;×&lt;/a&gt;
		&lt;input name=tags type=hidden value=42&gt;
	&lt;/span&gt;
	&lt;input type=text&gt;
&lt;/div&gt;
&lt;script&gt;
$(function() {

	var tags = [
		{ id: 42, toString: function() { return 'jQuery'; } },
		{ id: 31, toString: function() { return 'Python'; } },
		{ id: 25, toString: function() { return 'HTML'; } },
		{ id: 83, toString: function() { return 'PHP'; } },
		{ id: 40, toString: function() { return 'ASP.NET MVC'; } },
		{ id: 25, toString: function() { return 'CSS'; } },
		{ id: 66, toString: function() { return 'JavaScript'; } },
		{ id: 87, toString: function() { return 'C#'; } },
		{ id: 28, toString: function() { return 'D'; } },
		{ id: 91, toString: function() { return 'Java'; } },
		{ id: 10, toString: function() { return 'Ruby'; } },
	];
	$('#tags').tagSelector(tags, 'tags');

});
&lt;/script&gt;
</pre>
	<p>
		There's also a Django Form Widget that you can use with MultipleChoiceField and ModelMultipleChoiceField that
		will render the field apropiatelly and display already selected values. Just import TagSelectMultiple from the
		widgets.py file an use it like this:
	</p>
	<pre>
from tagselector.widgets import TagSelectMultiple

class TagsForm(forms.ModelForm):
	tags = forms.ModelMultipleChoiceField(queryset=Tag.objects.all(),
		widget=TagSelectMultiple(attrs={ 'style': 'width:300px' }))
</pre>
	<h2>Methods</h2>
	<dl>
		<dt>jQuery.tagSelector(source, name)</dt>
		<dd>
			<p>
				Initializes the tagSelector for the selected elements. They should have the appropiate structure (at
				least a div with an input field inside.
			</p>
			<table class=options>
				<thead>
					<tr>
						<th>Parameter</th>
						<th>Type</th>
						<th>Description</th>
					</tr>
				</thead>
				<tr>
					<td>source</td>
					<td>string/array/function</td>
					<td>
						The "source" property for <a href="http://jqueryui.com/demos/autocomplete/">jQuery UI's 
						Autocomplete</a> plugin.
					</td>
				</tr>
				<tr>
					<td>name</td>
					<td>string</td>
					<td>Name of the hidden fields.</td>
				</tr>
			</table>
		</dd>
	</dl>	
	<h3>License</h3>
	<p>
		You may use any Tag Selector under the terms of either the MIT License or the GNU General Public License (GPL)
		Version 2.
	</p>
	<p><a href="https://petprojects.googlecode.com/svn/trunk/MIT-LICENSE.txt">MIT-LICENSE.txt</a><br/>
	<a href="https://petprojects.googlecode.com/svn/trunk/GPL-LICENSE.txt">GPL-LICENSE.txt</a></p>
	<script>
		var tags = [
			{ id: 42, toString: function() { return 'jQuery'; } },
			{ id: 31, toString: function() { return 'Python'; } },
			{ id: 25, toString: function() { return 'HTML'; } },
			{ id: 83, toString: function() { return 'PHP'; } },
			{ id: 40, toString: function() { return 'ASP.NET MVC'; } },
			{ id: 25, toString: function() { return 'CSS'; } },
			{ id: 66, toString: function() { return 'JavaScript'; } },
			{ id: 87, toString: function() { return 'C#'; } },
			{ id: 28, toString: function() { return 'D'; } },
			{ id: 91, toString: function() { return 'Java'; } },
			{ id: 10, toString: function() { return 'Ruby'; } },
		];
		$('#tags').tagSelector(tags, 'tags');
	</script>
</body>
</html>
